/**
 */

require("../../../../../both/base.js")
import './PersonalCourses.scss'

import PersonalAbstractSection from '../PersonalAbstractSection.jsx'

class PersonalCourses extends PersonalAbstractSection {
    constructor(props) {
        super(props)

        this.state ={
            courses : this.props.histories

            // courses : [{
            //     cover : "http://img.mukewang.com/57075cbc00012aaf06000338-240-135.jpg",
            //     title : "Android攻城狮的第二门课（第3季）",
            //     starNum : 99,
            //     href : "#",
            //     commentNum : 100,
            //     noteNum : 100,
            //     year : 2017,
            //     month : "03月30日"
            // }]
        }

    }

    changePageWrap(page){
        var self = this
        const {changePage} = self.props
        var regx = new RegExp("disable")   // test is disable 也可以加一个isDisable参数给changePageWrap

        return function(e){
            if(regx.test(e.target.className)){
                return
            }

            changePage(page)
        }
    }

    handleDelete(historyId,e){
        const {delHistory} = this.props

        if(confirm("确认删除此记录吗？")){
            delHistory(historyId)
        }
    }

    handleStar(isCollect,historyId,course,e){
        const {collectCourse,unCollectCourse} = this.props

        if(isCollect == 0){
            collectCourse(historyId,course)
        }else if(isCollect == 1){
            unCollectCourse(historyId,course)
        }
    }

    /**
     * Section Element
     * @returns {XML}
     */
    createSectionElement() {

        const changePageWrap = this.changePageWrap.bind(this)

        // page
        var totalPage = this.props.totalPage
        var page = this.props.page

        var pageLists = []
        for(var i = 0; i < totalPage; i++){
            if(i < 6){      // 小于6页
                pageLists.push(
                    <li key={i} className={i + 1 == page ? "page cur" : "page"} onClick={changePageWrap(i + 1)}>{i + 1}</li>
                )
            }
        }
        if(pageLists.length > 6){
            pageLists = pageLists.slice(page - 1,page + 5)     // 切6个
        }
        if(pageLists.length == 0){
            pageLists = <li className="page cur">1</li>
        }


        // del null
        var newHistories = Array.prototype.concat.call(this.props.histories,[])
        newHistories = newHistories.filter((e) => {
            return typeof e.Course !== "undefined" && e.Course !== null
        })
        var lists = newHistories.map((e,i) => {
            var course = e.Course
            return <li className="course_item">
                <div className="watch_time">
                    <span className="watch_year">{e.year}</span>
                    <div className="watch_day">
                        {e.month}
                    </div>
                </div>
                <div className="course_list_m">
                    <a className="cover" href={`/user_video/${course.id}`}><img src={course.cover} className="course_cover"/></a>
                    <div className="course_info">
                        <a className="title" href={`/user_video/${course.id}`}>{course.title}</a>

                        <div className="course_count">
                            <ul className="count_wr">
                                <li>点赞&nbsp;{course.starNum}</li>
                                <li>评论&nbsp;{e.commentNum}</li>
                                <li>笔记&nbsp;{e.noteNum}</li>
                            </ul>
                        </div>
                        <div className="course_ctrl">
                            <i className="fa fa-angle-down"></i>
                        </div>
                        <div className="share_box">
                            <span className={e.isCollect == 1 ? "active" : null} onClick={this.handleStar.bind(this,e.isCollect,e.id,course)}><i className="fa fa-star"></i></span>
                            <span onClick={this.handleDelete.bind(this,e.id)}><i className="fa fa-trash"></i></span>
                        </div>
                    </div>
                </div>
            </li>
        })
        if(lists.length == 0){
            lists = <div className="no_data_wr">
                <div className="no_data">
                    未观看过任何视频，可以去<a href="/">首页</a>看看
                </div>
            </div>
        }

        return(<div className="personal_courses_cr bln">
            <ul className="courses_list">
                {lists}
            </ul>

            <div className="user_course_list_paging">
                <ul className="paging">
                    <li className={totalPage == 1 || page == 1 ? "disable" : null} onClick={changePageWrap(1)}>首页</li>
                    <li className={totalPage == 1 || page == 1 ? "disable" : null} onClick={changePageWrap(page - 1)}>上一页</li>
                    {pageLists}
                    <li className={(page == totalPage || totalPage == 0)? "disable" : null} onClick={changePageWrap(page + 1)}>下一页</li>
                    <li className={(page == totalPage || totalPage == 0) ? "disable" : null} onClick={changePageWrap(totalPage)}>尾页</li>
                </ul>
            </div>
        </div>)
    }
}

PersonalCourses.displayName = 'PersonalCourses'

export default PersonalCourses